<!-- 首页 -->
<template>
    <div id="index">
        <div class="header">
            <div class="header_left">
                <img src="../../assets/images/logo.jpg" alt=""/>
                <h1>医院管理系统</h1>
            </div>
            <div class="header_right">
                {{ Username }} 你好！
                <el-dropdown @command="logout">
                    <img src="../../assets/images/header.jpg" alt=""/>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="1">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <div class="bottom">
            <div class="bottom_menu">
                <el-menu
                        :default-active="$router.path"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        background-color="#fff"
                        text-color="gray"
                        active-text-color="#ffd04b"
                        collapse-transition
                >
                    <el-submenu
                            v-for="item in Usermenu"
                            :key="item.id"
                            :index="item.m_name"
                    >
                        <template slot="title">
                            <i :class="item.m_icon"></i>
                            <span>{{ item.m_name }}</span>
                        </template>
                        <el-menu-item-group v-for="citem in item.child" :key="citem.id">
                            <el-menu-item :index="citem.m_name" @click="goPage(citem.m_url)" >
                                <template slot="title">
                                    <i :class="citem.m_icon"></i>
                                    <span>{{ citem.m_name }}</span>
                                </template>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </div>
            <div class="bottom_content">
                <router-view/>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapGetters} from "vuex";
    import {removeToken} from "../../utils/cookie"
    import {loginRoleInfo} from "../../api/login";
    export default {
        name: "index.vue",
        computed: {
            ...mapGetters(["getUsername", "getUsermenu"]),
        },
        data() {
            return {
                Username: "",
                Usermenu: {},
            };
        },
        //生命周期 - 创建完成（访问当前this实例）
        created() {
            this.init()
        },
        //生命周期 - 挂载完成（访问DOM元素）
        mounted() {
        },
        methods: {
            async init() {
                let info = await loginRoleInfo();
                sessionStorage.setItem('initUserInfo', JSON.stringify({
                    username: info.userInfo.admin_name,
                    usermenu: info.menuInfo.includes
                }));
                sessionStorage.setItem('hospitalId', info.menuInfo.hospitalId);
                this.$store.commit('initUserInfo', {
                    username: info.userInfo.admin_name,
                    usermenu: info.menuInfo.includes
                });
                let {username, usermenu} = JSON.parse(
                    sessionStorage.getItem("initUserInfo")
                );
                this.Username = username;
                this.Usermenu = usermenu;
                this.$router.push(usermenu[0].child[0].m_url);
            },
            logout(item) {
                removeToken('token');
                removeToken('admin_id');
                removeToken('admin_password');
                sessionStorage.clear();
                this.$router.push("/login");
                history.pushState(null, null, document.URL);
                window.addEventListener(
                    "popstate",
                    function (e) {
                        history.pushState(null, null, document.URL);
                    },
                    false
                );
            },
            handleOpen(key, keyPath) {
                // console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                // console.log(key, keyPath);
            },
            goPage(url) {
                this.$router.push(url);
            },
        },
    };
</script>
<style lang="scss">
    /* @import url(); 引入css类 */
    #index {
        height: 100%;
        display: flex;
        flex-direction: column;
        background-color: #d6dfea;

        .header {
            height: 80px;
            background-color: #fff;
            display: flex;
            align-items: center;
            padding: 0 20px;
            font-size: 25px;
            cursor: pointer;
            color: wheat;
            border-radius: 10px;
            &_left {
                display: flex;
                align-items: center;

                img {
                    padding: 0;
                    margin: 0;
                    width: 45px;
                    margin-right: 10px;
                }

                h1 {
                    padding: 0;
                    margin: 0;
                    font-size: 40px;
                    font-weight: bolder;
                    color: wheat;
                }
            }

            &_right {
                display: flex;
                align-items: center;
                margin-left: auto;

                img {
                    border-radius: 50%;
                    width: 45px;
                }
            }

            /*flex: 1;*/
            .el-dropdown-link {
                font-size: 25px;
                cursor: pointer;
                color: wheat;
            }

            .el-icon-arrow-down {
                font-size: 12px;
            }
        }

        .bottom {
            margin-top: 10px;
            margin-bottom: 10px;
            flex: auto;
            display: flex;
            border-radius: 10px;
            &_menu {
                /*width: 100%;*/
                width: 20%;
                border-radius: 10px;
                .el-menu {
                    border-radius: 10px;
                    height: 100%;
                    .el-menu-item, .el-submenu__title{
                        border-radius: 10px;
                    }
                }
                
            }

            &_content {
                border-radius: 10px;
                flex: auto;
                margin: 0 10px 0px 10px;
                background-color: white;
                padding: 20px 0 0 0;
            }
        }
    }
</style>